import Link from "next/link";
import { Button } from "@repo/ui/button";
import styles from "./page.module.css";

// 模拟用户数据
const mockUsers = {
  "123": {
    id: "123",
    name: "张三",
    email: "zhangsan@example.com",
    avatar: "/avatar1.jpg",
    joinDate: "2023-01-15",
    level: "VIP",
    points: 1250,
    orders: 45,
    address: "北京市朝阳区科技园区",
    phone: "138****5678"
  },
  "456": {
    id: "456", 
    name: "李四",
    email: "lisi@example.com",
    avatar: "/avatar2.jpg",
    joinDate: "2023-03-20",
    level: "普通会员",
    points: 680,
    orders: 23,
    address: "上海市浦东新区",
    phone: "139****1234"
  },
  "789": {
    id: "789",
    name: "王五", 
    email: "wangwu@example.com",
    avatar: "/avatar3.jpg",
    joinDate: "2023-06-10",
    level: "黄金会员",
    points: 2100,
    orders: 78,
    address: "广州市天河区",
    phone: "137****9876"
  }
};

// 模拟用户订单数据
const mockOrders = {
  "123": [
    { id: "ORD001", date: "2024-01-15", status: "已完成", total: "¥299" },
    { id: "ORD002", date: "2024-01-10", status: "配送中", total: "¥159" },
    { id: "ORD003", date: "2024-01-05", status: "已完成", total: "¥89" }
  ],
  "456": [
    { id: "ORD004", date: "2024-01-12", status: "已完成", total: "¥199" },
    { id: "ORD005", date: "2024-01-08", status: "已完成", total: "¥129" }
  ],
  "789": [
    { id: "ORD006", date: "2024-01-14", status: "已完成", total: "¥399" },
    { id: "ORD007", date: "2024-01-11", status: "配送中", total: "¥259" },
    { id: "ORD008", date: "2024-01-07", status: "已完成", total: "¥179" }
  ]
};

// SSR 页面 - 每次请求时在服务端渲染
export default async function UserPage({ params }: { params: { id: string } }) {
  const userId = params.id;
  const user = mockUsers[userId as keyof typeof mockUsers];
  const orders = mockOrders[userId as keyof typeof mockOrders] || [];

  // 模拟服务端数据获取延迟
  await new Promise(resolve => setTimeout(resolve, 100));

  if (!user) {
    return (
      <div className={styles.container}>
        <div className={styles.error}>
          <h1>用户不存在</h1>
          <p>抱歉，找不到该用户信息</p>
          <Link href="/">
            <Button appName="web">返回首页</Button>
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <h1>用户详情</h1>
        <p>用户 ID: {userId}</p>
      </header>

      <main className={styles.main}>
        {/* 用户基本信息 */}
        <section className={styles.userInfo}>
          <div className={styles.avatarSection}>
            <div className={styles.avatar}>
              <img src={user.avatar} alt={user.name} />
            </div>
            <div className={styles.userDetails}>
              <h2>{user.name}</h2>
              <p className={styles.email}>{user.email}</p>
              <div className={styles.level}>
                <span className={`${styles.levelBadge} ${styles[user.level.toLowerCase()]}`}>
                  {user.level}
                </span>
              </div>
            </div>
          </div>
          
          <div className={styles.stats}>
            <div className={styles.statItem}>
              <h3>积分</h3>
              <p>{user.points}</p>
            </div>
            <div className={styles.statItem}>
              <h3>订单数</h3>
              <p>{user.orders}</p>
            </div>
            <div className={styles.statItem}>
              <h3>注册时间</h3>
              <p>{user.joinDate}</p>
            </div>
          </div>
        </section>

        {/* 联系信息 */}
        <section className={styles.contactInfo}>
          <h3>联系信息</h3>
          <div className={styles.contactGrid}>
            <div className={styles.contactItem}>
              <h4>📞 手机号码</h4>
              <p>{user.phone}</p>
            </div>
            <div className={styles.contactItem}>
              <h4>📍 地址</h4>
              <p>{user.address}</p>
            </div>
          </div>
        </section>

        {/* 订单历史 */}
        <section className={styles.orderHistory}>
          <h3>订单历史</h3>
          <div className={styles.orderList}>
            {orders.length > 0 ? (
              orders.map((order) => (
                <div key={order.id} className={styles.orderItem}>
                  <div className={styles.orderHeader}>
                    <span className={styles.orderId}>{order.id}</span>
                    <span className={`${styles.orderStatus} ${styles[order.status]}`}>
                      {order.status}
                    </span>
                  </div>
                  <div className={styles.orderDetails}>
                    <span>下单时间: {order.date}</span>
                    <span className={styles.orderTotal}>总金额: {order.total}</span>
                  </div>
                </div>
              ))
            ) : (
              <p className={styles.noOrders}>暂无订单记录</p>
            )}
          </div>
        </section>

        {/* 渲染模式说明 */}
        <section className={styles.renderInfo}>
          <h3>页面渲染信息</h3>
          <div className={styles.renderDetails}>
            <p><strong>渲染模式:</strong> SSR (Server-Side Rendering)</p>
            <p><strong>渲染时间:</strong> {new Date().toLocaleString()}</p>
            <p><strong>说明:</strong> 此页面在每次请求时在服务端渲染，确保数据实时性</p>
          </div>
        </section>
      </main>

      <footer className={styles.footer}>
        <Link href="/">
          <Button appName="web">返回首页</Button>
        </Link>
      </footer>
    </div>
  );
}
